import React from "react";
import Image from "next/image";
export default function TransportItem({ index, label, desc }: { index: number, label: string, desc: string }) {
  const bg = `bg-group_bg_${index}`
  return (
    <div className={`w-[560px] h-[400px] bg-[length:560px_400px]  ${bg} relative flex flex-col items-center`}>
      <Image
        src={
          index % 2 == 1
            ? "/assets/price/index_odd.png"
            : "/assets/price/index_even.png"
        }
        alt=""
        width={116}
        height={60}
        className="w-[116px] h-[60px] absolute -top-[13px] -left-[6px]"
      ></Image>

      <div className="absolute w-[56px] text-center left-0 font-bold text-[32px] text-white leading-9">{index}</div>
      <h4 className="font-bold mt-10 leading-9 text-[32px] text-[#2E9BF9]">{label}</h4>

      <Image
        src={`/assets/price/icon_${index}.png`}
        alt=""
        width={100}
        height={100}
        className="w-[100px] h-[100px] mt-10"
      ></Image>
      <p className="leading-7 text-[#333] text-[20px] font-medium mt-[25px] w-[480px]">{desc}</p>
    </div>
  );
}
